<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>消息通知 - 社交社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdncdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --secondary: #10B981;
      --warning: #F59E0B;
      --danger: #EF4444;
      --light: #F9FAFB;
      --dark: #1F2937;
      --light-gray: #E5E7EB;
      --dark-gray: #6B7280;
      --white: #FFFFFF;
      --border-light: #E5E7EB;
      --border-dark: #374151;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light);
      color: var(--dark);
      height: 100vh;
      overflow-x: hidden;
      margin: 0;
    }
    
    /* 通用样式 */
    .notification-page {
      display: none;
      height: 100vh;
      flex-direction: column;
    }
    
    .notification-page.active {
      display: flex;
    }
    
    .page-header {
      padding: 16px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      flex: 1;
      text-align: center;
    }
    
    .header-btn {
      background: none;
      border: none;
      font-size: 16px;
      color: var(--primary);
      font-weight: 500;
    }
    
    .back-btn {
      color: var(--dark);
      background: none;
      border: none;
      font-size: 20px;
      padding: 4px;
    }
    
    .notification-tabs {
      display: flex;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
    }
    
    .tab-item {
      flex: 1;
      padding: 14px 0;
      text-align: center;
      font-size: 15px;
      font-weight: 500;
      color: var(--dark-gray);
      position: relative;
      cursor: pointer;
    }
    
    .tab-item.active {
      color: var(--primary);
    }
    
    .tab-item.active::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: var(--primary);
      border-radius: 3px 3px 0 0;
    }
    
    .tab-badge {
      position: absolute;
      top: 8px;
      right: 25%;
      background-color: var(--danger);
      color: white;
      font-size: 11px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .notification-list {
      flex: 1;
      overflow-y: auto;
      padding: 10px 0;
    }
    
    .notification-item {
      padding: 12px 16px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
      display: flex;
      gap: 12px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    
    .notification-item:hover {
      background-color: var(--light);
    }
    
    .notification-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .icon-friend {
      background-color: rgba(59, 130, 246, 0.1);
      color: var(--primary);
    }
    
    .icon-like {
      background-color: rgba(239, 68, 68, 0.1);
      color: var(--danger);
    }
    
    .icon-comment {
      background-color: rgba(16, 185, 129, 0.1);
      color: var(--secondary);
    }
    
    .icon-system {
      background-color: rgba(245, 158, 11, 0.1);
      color: var(--warning);
    }
    
    .notification-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .notification-text {
      font-size: 15px;
      line-height: 1.4;
      margin-bottom: 4px;
    }
    
    .notification-time {
      font-size: 12px;
      color: var(--dark-gray);
      text-align: right;
    }
    
    .unread-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--primary);
      align-self: flex-start;
    }
    
    .empty-state {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      color: var(--dark-gray);
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      opacity: 0.3;
    }
    
    .empty-text {
      font-size: 16px;
      text-align: center;
      max-width: 250px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 100;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .switcher-header {
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid var(--border-light);
    }
    
    .style-option {
      padding: 10px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .style-option:hover {
      background-color: var(--light);
    }
    
    .style-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 深色模式 */
    .dark {
      background-color: var(--dark);
      color: var(--light);
    }
    
    .dark .page-header {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .dark .notification-tabs {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .dark .tab-item {
      color: #9CA3AF;
    }
    
    .dark .notification-item {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .dark .notification-item:hover {
      background-color: #1F2937;
    }
    
    .dark .notification-time {
      color: #9CA3AF;
    }
    
    .dark .empty-state {
      color: #9CA3AF;
    }
    
    .dark .style-switcher {
      background-color: #1F2937;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .dark .switcher-header {
      border-bottom-color: var(--border-dark);
      color: var(--light);
    }
    
    .dark .style-option {
      color: var(--light);
    }
    
    .dark .style-option:hover {
      background-color: #374151;
    }
    
    .dark .back-btn {
      color: var(--light);
    }
    
    /* 卡片风格 */
    .card-style .notification-item {
      margin: 10px 16px;
      border-radius: 12px;
      border: 1px solid var(--border-light);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    
    .card-style .notification-list {
      padding: 0;
      background-color: var(--light);
    }
    
    .card-style.dark .notification-item {
      border-color: var(--border-dark);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .card-style.dark .notification-list {
      background-color: var(--dark);
    }
    
    /* 简约风格 */
    .minimal-style .notification-icon {
      width: 32px;
      height: 32px;
      font-size: 14px;
    }
    
    .minimal-style .notification-text {
      font-size: 14px;
    }
    
    .minimal-style .notification-item {
      padding: 10px 16px;
    }
    
    .minimal-style .notification-tabs {
      display: none;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .notification-item {
      animation: fadeIn 0.3s ease forwards;
    }
    
    .notification-item:nth-child(1) { animation-delay: 0.1s; }
    .notification-item:nth-child(2) { animation-delay: 0.2s; }
    .notification-item:nth-child(3) { animation-delay: 0.3s; }
    .notification-item:nth-child(4) { animation-delay: 0.4s; }
    .notification-item:nth-child(5) { animation-delay: 0.5s; }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">消息样式</div>
    <div class="style-option active" data-style="default">默认样式</div>
    <div class="style-option" data-style="dark">深色模式</div>
    <div class="style-option" data-style="card">卡片风格</div>
    <div class="style-option" data-style="minimal">简约风格</div>
  </div>
  
  <!-- 默认样式消息页面 -->
  <div class="notification-page active" id="defaultPage">
    <!-- 页头 -->
    <div class="page-header">
      <button class="back-btn" aria-label="返回">
        <i class="fa fa-arrow-left"></i>
      </button>
      <div class="header-title">消息通知</div>
      <button class="header-btn">全部已读</button>
    </div>
    
    <!-- 标签页 -->
    <div class="notification-tabs">
      <div class="tab-item active">
        全部
        <span class="tab-badge">5</span>
      </div>
      <div class="tab-item">
        互动
        <span class="tab-badge">3</span>
      </div>
      <div class="tab-item">
        系统
        <span class="tab-badge">2</span>
      </div>
    </div>
    
    <!-- 消息列表 -->
    <div class="notification-list">
      <div class="notification-item">
        <div class="notification-icon icon-friend">
          <i class="fa fa-user-plus"></i>
        </div>
        <div class="notification-content">
          <div class="notification-text">
            <strong>李小明</strong> 请求添加你为好友
          </div>
          <div class="d-flex justify-content-between">
            <div>
              <button class="btn btn-sm btn-primary me-1">同意</button>
              <button class="btn btn-sm btn-light">拒绝</button>
            </div>
            <div class="notification-time">刚刚</div>
          </div>
        </div>
        <div class="unread-indicator"></div>
      </div>
      
      <div class="notification-item">
        <div class="notification-icon icon-like">
          <i class="fa fa-heart"></i>
        </div>
        <div class="notification-content">
          <div class="notification-text">
            <strong>张小红</strong> 和其他 3 人点赞了你的动态
          </div>
          <div class="notification-time">10分钟前</div>
        </div>
        <div class="unread-indicator"></div>
      </div>
      
      <div class="notification-item">
        <div class="notification-icon icon-comment">
          <i class="fa fa-comment"></i>
        </div>
        <div class="notification-content">
          <div class="notification-text">
            <strong>王大锤</strong> 评论了你的帖子："这个想法太棒了！"
          </div>
          <div class="notification-time">1小时前</div>
        </div>
        <div class="unread-indicator"></div>
      </div>
      
      <div class="notification-item">
        <div class="notification-icon icon-system">
          <i class="fa fa-bell"></i>
        </div>
        <div class="notification-content">
          <div class="notification-text">
            你的账号已成功完成实名认证，现在可以解锁更多功能
          </div>
          <div class="notification-time">3小时前</div>
        </div>
        <div class="unread-indicator"></div>
      </div>
      
      <div class="notification-item">
        <div class="notification-icon icon-system">
          <i class="fa fa-info-circle"></i>
        </div>
        <div class="notification-content">
          <div class="notification-text">
            系统将于今晚23:00-次日02:00进行维护，期间可能无法正常使用
          </div>
          <div class="notification-time">昨天</div>
        </div>
      </div>
      
      <div class="notification-item">
        <div class="notification-icon icon-like">
          <i class="fa fa-heart"></i>
        </div>
        <div class="notification-content">
          <div class="notification-text">
            <strong>赵小丽</strong> 点赞了你的评论
          </div>
          <div class="notification-time">昨天</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 深色模式消息页面 -->
  <div class="notification-page dark" id="darkPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 卡片风格消息页面 -->
  <div class="notification-page card-style" id="cardPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 简约风格消息页面 -->
  <div class="notification-page minimal-style" id="minimalPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 复制内容到其他样式页面
    const defaultPage = document.getElementById('defaultPage');
    document.getElementById('darkPage').innerHTML = defaultPage.innerHTML;
    document.getElementById('cardPage').innerHTML = defaultPage.innerHTML;
    document.getElementById('minimalPage').innerHTML = defaultPage.innerHTML;
    
    // 获取DOM元素
    const styleOptions = document.querySelectorAll('.style-option');
    const notificationPages = document.querySelectorAll('.notification-page');
    const tabItems = document.querySelectorAll('.notification-tabs .tab-item');
    const backButtons = document.querySelectorAll('.back-btn');
    const markAllReadButtons = document.querySelectorAll('.header-btn');
    const notificationItems = document.querySelectorAll('.notification-item');
    
    // 当前激活的样式索引
    let currentStyleIndex = 0;
    
    // 切换消息样式
    styleOptions.forEach((option, index) => {
      option.addEventListener('click', function() {
        // 更新样式选项的活跃状态
        styleOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
        
        // 隐藏当前页面
        notificationPages.forEach(page => page.classList.remove('active'));
        
        // 显示选中的页面
        const styleId = this.getAttribute('data-style') + 'Page';
        document.getElementById(styleId).classList.add('active');
        
        // 更新当前样式索引
        currentStyleIndex = index;
      });
    });
    
    // 切换标签页
    tabItems.forEach((tab, index) => {
      tab.addEventListener('click', function() {
        // 获取当前活跃的页面
        const activePage = document.querySelector('.notification-page.active');
        
        // 更新当前页面的标签活跃状态
        activePage.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        // 在实际应用中，这里可以根据标签页切换不同的消息列表
        const tabName = ['全部', '互动', '系统'][index];
        console.log(`切换到${tabName}消息`);
      });
    });
    
    // 返回按钮功能
    backButtons.forEach(button => {
      button.addEventListener('click', function() {
        alert('返回首页（实际应用中会导航到首页）');
      });
    });
    
    // 全部已读功能
    markAllReadButtons.forEach(button => {
      button.addEventListener('click', function() {
        const activePage = document.querySelector('.notification-page.active');
        
        // 移除所有未读指示器
        activePage.querySelectorAll('.unread-indicator').forEach(indicator => {
          indicator.remove();
        });
        
        // 更新标签页徽章
        activePage.querySelectorAll('.tab-badge').forEach(badge => {
          badge.remove();
        });
        
        alert('所有消息已标记为已读');
      });
    });
    
    // 消息项点击事件
    notificationItems.forEach(item => {
      item.addEventListener('click', function(e) {
        // 如果点击的是按钮，不执行消息标记已读操作
        if (e.target.tagName === 'BUTTON' || e.target.parentElement.tagName === 'BUTTON') {
          return;
        }
        
        // 移除未读指示器
        const unreadIndicator = this.querySelector('.unread-indicator');
        if (unreadIndicator) {
          unreadIndicator.remove();
          
          // 更新标签页徽章计数（简化处理）
          const activePage = document.querySelector('.notification-page.active');
          const badges = activePage.querySelectorAll('.tab-badge');
          badges.forEach(badge => {
            let count = parseInt(badge.textContent);
            if (count > 0) {
              badge.textContent = count - 1;
              if (count - 1 === 0) {
                badge.remove();
              }
            }
          });
        }
        
        // 在实际应用中，这里可以打开消息详情
        const messageText = this.querySelector('.notification-text').textContent.trim();
        console.log('查看消息:', messageText);
      });
    });
    
    // 好友请求按钮事件
    document.querySelectorAll('.notification-item .btn').forEach(btn => {
      btn.addEventListener('click', function(e) {
        e.stopPropagation();
        const action = this.textContent.trim();
        const parentItem = this.closest('.notification-item');
        const userName = parentItem.querySelector('strong').textContent;
        
        if (action === '同意') {
          parentItem.querySelector('.notification-text').innerHTML = 
            `你已同意 <strong>${userName}</strong> 的好友请求，现在可以开始聊天了`;
        } else {
          parentItem.querySelector('.notification-text').innerHTML = 
            `你已拒绝 <strong>${userName}</strong> 的好友请求`;
        }
        
        // 移除按钮组
        this.closest('div').remove();
        
        // 移除未读状态
        const unreadIndicator = parentItem.querySelector('.unread-indicator');
        if (unreadIndicator) {
          unreadIndicator.remove();
        }
        
        alert(`${action}了${userName}的好友请求`);
      });
    });
  </script>
</body>
</html>
